<template>
	<div class="photoinfo-list">
		<h3>{{info.title}}</h3>
		<p class="subtitle">
			<span>发表时间:{{info.add_time|dateFormat}}</span>
			<span>点击：{{info.click}}次</span>
		</p>
		
		<hr>
		
		<!-- 缩略图区域 -->
		<div class="thumbs">
			<!-- <img  v-for="(item,index) in list" :src="item.url" class="preview-img"
			  height="100" @click="$preview.open(index,list)" :key="item.url"> -->
			  <vue-preview :slides="list" @close="handleClose"></vue-preview>
		</div>
		
		<!-- 图片内容区域 -->
		<div class="content" v-html="info.content"></div>
		
		<!-- 放置一个现成的评论子组件 -->
		<comment :id="this.id"></comment>
	</div>
</template>

<script>
	// 1.导入comment子组件
	import comment from '../subcomponents/comment.vue'
	export default{
		data(){
			return{
				id:this.$route.params.id,//这是图片的id
				info:{},
				list:[],//缩略图
				
			}
		},
		created(){
			this.getphotoinfo();
			this.getThumbs();
		},
		methods:{
			getphotoinfo:function(){
				// 获取图片详情,这里的路由地址和新闻一样，因为图文新闻也属于新闻，必定在新闻数据库中
				this.axios.post('http://localhost:3000/api/getnew/:id',{id:this.id})
				.then((res) => {
					if(res.data.status==0){
						this.info={id:res.data.data[0].id,
						add_time:res.data.data[0].add_time,
						url:res.data.data[0].url,
						title:res.data.data[0].title,
						content:res.data.data[0].content,
						click:res.data.data[0].click}
					}
				})
			},
			// 获取缩略图
			getThumbs:function(){
				this.axios.post('http://localhost:3000/api/thumbs',{id:this.id})
				.then((res) => {
					if(res.data.status===0){
						// 循环每个图片数据，补全宽高
						res.data.data.forEach(item => {
							// 作为缩略图，这几个属性必须有
							// 这里的属性应该是src而不是url,另外必须由msrc属性
							// console.log(item);
							this.list.push({src:item.url,w:300,h:400,
							msrc:item.url,alt: 'picture2',title: 'Image Caption 2'})
						})
					}
				})
			},
			 handleClose () {
				console.log('close event')
			 },
		},
		components:{
			//2.注册子组件
			'comment':comment,
		},
	}
</script>

<!-- 这里要去掉scoped，否则没法更改图片大小 -->
<style lang="scss">
	.photoinfo-list{
		padding: 3px;
		
		h3{
			margin: 15px 0;
			font-size: 15px;
			text-align: center;
			color: #26a2ff;
		}
		.subtitle{
			display: flex;
			// 向左右两边靠拢
			justify-content: space-between;
			font-size: 13px;
		}
		.content{
			font-size: 13px;
			line-height: 25px;
		}
		.thumbs{
			margin: auto;
			// 阴影
			box-shadow: 0 0 3px #999;
			.my-gallery{
				figure{
					display: inline;
					margin: auto;
					img{
						width: 110px;
						vertical-align: middle;
						padding: 10px;
					}
				}
			}
			
		}
	}
</style>
